<template>
  <div class="app-container">

    <el-card class="filter-container">
      <el-button type="success" @click="updateUiPermissions">保存选中的UI权限</el-button>
    </el-card>

    <el-row :gutter="48">
      <el-col :span="12">

        <el-card class="card-container" shadow="hover">

          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
          />
        </el-card>

        <el-card class="card-container" shadow="hover">
          <el-tree
            ref="tree"
            v-loading="treeLoading"
            :data="menuTreeList"
            default-expand-all
            show-checkbox
            :filter-node-method="filterNode"
            node-key="id"
            accordion
          >
            <span slot-scope="{ node, data }" class="tree-node">
              <el-badge :value="data.sort">

                <el-tag type="text">{{ node.label }}</el-tag>
              </el-badge>
              <span>
                <el-button
                  type="primary"
                  size="mini"
                  @click.stop="() => component(data.id)"
                >
                  选择组件
                </el-button>
              </span>
            </span>
          </el-tree>
          <div style="margin-top: 20px" align="center">
            <el-button type="primary" @click="handleSave()">保存</el-button>
            <el-button @click="handleClear()">清空</el-button>
          </div>

        </el-card>
      </el-col>

      <el-col :span="12">

        <el-card class="table-container" shadow="hover">
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="componentPermissionList"
            fit
          >
            <el-table-column align="center" width="200" label="名称">
              <template slot-scope="scope">
                <el-checkbox :value="componentSelected(scope.row.id)" @change="componentSelectChange(scope.row.id)" />
              </template>
            </el-table-column>

            <el-table-column align="center" width="200" label="名称">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="备注">
              <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
              </template>
            </el-table-column>

          </el-table>
        </el-card>

      </el-col>

    </el-row>

  </div>
</template>

<script>

import {
  getTree
} from '@/api/system/menu'

import {
  getList as getComponentList
} from '@/api/system/component'

import {
  getUiPermissions,
  updateUiPermissions
} from '@/api/system/role'

export default {
  data() {
    return {
      menuTreeList: [],

      statusOptions: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      filterText: '',
      parentName: null,
      isAdd: false,

      treeLoading: true,
      listLoading: false,

      componentPermissionList: []
    }
  },
  created() {
    const roleId = this.$route.query.roleId
    if (!roleId) {
      this.$router.push({
        path: '/system/permission/role'
      })
    } else {
      this.roleId = roleId
      this.getTree()
      this.getUiPermissions()
    }
  },
  methods: {
    getTree() {
      this.treeLoading = true
      getTree().then(response => {
        const data = response.data
        this.menuTreeList = data
        this.treeLoading = false
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    component(menuPermissionId) {
      getComponentList({ menuPermissionId, status: 1 }).then(res => {
        this.componentPermissionList = res.data
      })
    },
    getUiPermissions() {
      getUiPermissions(this.roleId).then(res => {
        const selectTreeIds = []
        const selectComponentIds = {}

        const { menuPermissions, componentPermissions } = res.data

        menuPermissions.map(item => {
          selectTreeIds.push(item.id)
        })

        componentPermissions.map(item => {
          let selected = selectComponentIds[item.id]
          selected = {
            id: item.id,
            checked: true
          }

          selectComponentIds[item.id] = selected
        })

        this.selectComponentIds = selectComponentIds
        this.$refs.tree.setCheckedKeys(selectTreeIds)
      })
    },
    componentSelected(componentId) {
      debugger
      const selectComponentIds = this.selectComponentIds
      return selectComponentIds[componentId] && selectComponentIds[componentId].checked
    },
    componentSelectChange(componentId) {
      const selectComponentIds = this.selectComponentIds

      let currentComponent = selectComponentIds[componentId]

      // 如果不存在，说明初始状态是未选中
      if (!currentComponent) {
        currentComponent = {
          id: componentId,
          checked: false
        }
      }

      currentComponent.checked = !currentComponent.checked
      selectComponentIds[componentId] = currentComponent
    },
    updateUiPermissions() {
      this.$confirm('是否确认分配UI权限?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const componentPermissionIds = []

        const selectComponentIds = this.selectComponentIds

        Object.keys(selectComponentIds).map(key => {
          const value = selectComponentIds[key]
          if (value.checked) {
            componentPermissionIds.push(value.id)
          }
        })

        updateUiPermissions(this.roleId, {
          menuPermissionIds: this.$refs.tree.getCheckedKeys(),
          componentPermissionIds
        }).then(_ => {
          this.$message.success('分配UI权限成功')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  .el-badge__content.is-fixed{
    right:0px!important
  }
}

</style>
